<div class="ImageFilePreview">
	<div v-if="imageUrl || imageUrls.length">
        <template v-if="fileType === 'file'">
            <el-tooltip class="item" effect="dark" :content="value?value:'请上传图片'" placement="bottom">
                <img src="../common/vue/components/OssUpload/img/file.svg" class="avatar" @click="cardShow()">
            </el-tooltip>
        </template>

        <template v-else-if="!is_more">
            <el-tooltip class="item" effect="dark" :content="value?value:'请上传图片'" placement="bottom">
                <img :src="imageUrl" class="avatar" @click="cardShow()">
            </el-tooltip>
        </template>

        <div v-else style="display: flex;flex-wrap: wrap;">
            <el-card v-for="(item,index) in imageUrls" :key="index" style="width: 190px;margin-bottom: 10px;margin-right: 10px;">
                <div slot="header" class="card-header">
                    <el-button size="mini" type="text" style="float: right; padding: 3px 0" icon="el-icon-delete" @click="imageUrlsRemove(index)">删除
                    </el-button>
                </div>
                <el-tooltip class="item" effect="dark" :content="item" placement="bottom">
                    <el-image :src="alluse.oss + item" class="avatar" :preview-src-list="[alluse.oss + item]"></el-image>
                </el-tooltip>
            </el-card>
            <i class="el-icon-plus avatar-uploader-icon" style="margin-top: 38px;margin-left: 20px;" @click="cardShow()"></i>
        </div>
    </div>
    <i v-else class="el-icon-plus avatar-uploader-icon" @click="cardShow()"></i>

    	<el-dialog :title="'选择' + (fileType === 'file' ? '文件' : '图片')" :visible.sync="show" direction="rtl" append-to-body
    	 custom-class="select-dialog">
    		<div class="app-container">
    			<el-form :model="queryParams" ref="queryForm" class="app-form-system" :inline="true" v-show="showSearch">
    				<el-form-item label="原名" prop="originalName">
    					<el-input v-model="queryParams.originalName" placeholder="请输入原名" clearable size="small" @keyup.enter.native="handleQuery" />
    				</el-form-item>
    				<el-form-item>
    					<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
    					<el-button icon="el-icon-refresh" class="reset-btn" size="small" @click="resetQuery">重置</el-button>
    				</el-form-item>
    			</el-form>
    			<el-row :gutter="10" class="mb8 btn-set">
    				<el-col :span="1.5" v-if="fileType === 'file'">
    					<el-button type="primary" icon="el-icon-plus" size="small" style="width: 100px;" @click="handleFile">上传文件
    					</el-button>
    				</el-col>
    				<el-col :span="1.5" v-else-if="fileType === 'img'">
    					<el-button type="primary" icon="el-icon-plus" size="small" style="width: 100px;" @click="handleImage">上传图片
    					</el-button>
    				</el-col>
    				<el-col :span="1.5" v-else>
    					<el-button type="primary" icon="el-icon-plus" size="small" style="width: 120px;" @click="handleImage">上传裁剪图片
    					</el-button>
    				</el-col>
    				<el-col :span="1.5">
    					<el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete"
    					 >删除
    					</el-button>
    				</el-col>
    				<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    			</el-row>
    			<section class="app-table">
    				<el-row :gutter="20">
    					<el-col :span="6" v-for="item in ossList" class="card-item">
    						<el-card class="box-card">
    							<div slot="header" class="card-header">
    								<span>{{item.createBy}}</span>
    								<el-button size="mini" type="text" style="float: right; padding: 3px 0" icon="el-icon-delete" @click="handleDelete(item)"
    								 >删除
    								</el-button>
    								</template>
    							</div>
    							<div class="card-content" @click="cardClick(item)">
    								<div class="content-left">
    									<el-image v-if="fileType === 'file'" fit="contain" class="img" src="../common/vue/components/OssUpload/img/file.svg">
    										<div slot="placeholder" class="image-slot">
    											加载中<span class="dot">...</span>
    										</div>
    									</el-image>
    									<el-image v-else fit="contain" class="img" :src="item.url">
    										<div slot="placeholder" class="image-slot">
    											加载中<span class="dot">...</span>
    										</div>
    									</el-image>
    								</div>
    								<div class="content-right">
    									<el-tooltip class="item" effect="dark" :content="item.originalName" placement="bottom">
    										<div class="name"> {{item.originalName}}</div>
    									</el-tooltip>
    								</div>
    							</div>
    						</el-card>
    					</el-col>
    				</el-row>
    			</section>
    			<pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-sizes="[8, 16, 24, 32]"
    			 @pagination="getList"></pagination>

    			<!-- 添加或修改OSS对象存储对话框 -->
    			<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    				<el-form ref="form" :model="form" :rules="rules" label-width="80px">
    					<el-form-item :label="ossLabel">
    						<file-upload v-model="form.file" v-if="fileType === 'file'" :path="path" :limit="1" @uploaded="submitForm"></file-upload>
    						<image-upload v-model="form.file" v-else-if="fileType === 'img'" :path="path" :limit="1" @uploaded="submitForm" :file-size="fileSize"></image-upload>
    						<image-cut-upload v-model="form.file" v-if="open && fileType === 'img-cut'" @uploaded="submitForm" :path="path"></image-cut-upload>
    					</el-form-item>
    				</el-form>
    			</el-dialog>
    		</div>

    	</el-dialog>
</div>
